<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>item管理</title>
    <link rel="stylesheet" href="/myplugs/css/portal.css">
    <link rel="stylesheet" href="/myplugs/css/mycss.css">
    <link rel="stylesheet" href="/myplugs/css/floating_window.css">
    <link rel="stylesheet" href="/myplugs/css/add_new_float_window.css">
    <link rel="stylesheet" href="/myplugs/css/qty_plus_minus.css">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body >

<div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">
        <div class="row g-3 mb-4 align-items-center justify-content-between">
            <div class="col-auto">
                <a class="app-page-title mb-0">item管理</a>
<!--                <button class="btn app-btn-secondary" onclick="addNewShowPopup()">新增</button>-->
                <svg onclick="addNewShowPopup()" style="cursor: pointer;margin-left: 6px" t="1680233617466" class="icon" viewBox="0 0 1024 1190" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4445" width="50" height="55">
                    <path d="M512 921.6a409.6 409.6 0 1 0 0-819.2 409.6 409.6 0 0 0 0 819.2zM460.8 460.8V332.8a25.6 25.6 0 0 1 25.6-25.6h51.2a25.6 25.6 0 0 1 25.6 25.6V460.8h128a25.6 25.6 0 0 1 25.6 25.6v51.2a25.6 25.6 0 0 1-25.6 25.6H563.2v128a25.6 25.6 0 0 1-25.6 25.6h-51.2a25.6 25.6 0 0 1-25.6-25.6V563.2H332.8a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6H460.8z" fill="#3DC389" p-id="4446">
                    </path></svg>
            </div>


            <div class="col-auto">
                <div class="page-utilities">
                    <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                        <div class="col-auto">
                            <form class="table-search-form row gx-1 align-items-center" action="/selectItem" method="get">
                                <div class="col-auto">
                                    <input type="text" id="search-userInf" name="search" class="form-control search-orders" placeholder="请输入待搜索内容">
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn app-btn-secondary">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="orders-table-tab-content">
            <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
                <div class="app-card app-card-orders-table shadow-sm mb-5">
                    <div class="app-card-body">
                        <div class="table-responsive">
                            <table class="table app-table-hover mb-0 text-left">
                                <thead>
                                <tr>
                                    <th class="cell">itemId</th>
                                    <th class="cell">productId</th>
                                    <th class="cell">商品单价</th>
                                    <th class="cell">unitCost</th>
                                    <th class="cell">库存状态</th>
                                    <th class="cell">剩余库存(kg)</th>
                                    <th class="cell">大小</th>
                                    <th class="cell"></th>
                                    <th class="cell"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="item:${item}">
                                    <td class="cell thisItemId" th:text="${item.itemId}" id="thisItemId"></td>
                                    <td class="cell" th:text="${item.productId}"></td>
                                    <td class="cell" th:text="${item.listPrice}"></td>
                                    <td class="cell" th:text="${item.unitCost}"><span class="badge bg-success"></span></td>
                                    <td class="cell" th:text="${item.status}"><span class="badge bg-success"></span></td>
                                    <td class="cell">
                                        <div class="stock-control">
                                            <button class="minus-btn">-</button>
                                            <input class="stock-input" th:value="${item.quantity}" readonly="readonly">
                                            <button class="plus-btn">+</button>
                                        </div>
                                    </td>
                                    <td class="cell" th:text="${item.attribute1}">18055552882</td>
                                    <td class="cell"><a class="btn-sm app-btn-primary inf1">删除</a></td>
                                    <td class="cell"><a class="btn-sm app-btn-secondary inf" onclick="showPopup()">编辑信息</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
<!--                <nav class="app-pagination">-->
<!--                    <ul class="pagination justify-content-center">-->
<!--                        <li class="page-item disabled">-->
<!--                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>-->
<!--                        </li>-->
<!--                        <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!--                        <li class="page-item">-->
<!--                            <a class="page-link" href="#">下一页</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </nav>-->
            </div>
        </div>
    </div>
</div>

<!-- 修改item信息-->
<div class="overlay" id="overlay" style="display: none;"></div>

<form method="post" action="/update_item_information">
    <div class="popup row gy-4" id="popup" style="display: none;">
        <div class="app-card-footer p-2-2 mt-auto">
            <a class="my-css-a">商品信息编辑</a>
        </div>
        <div class="app-card-body px-4 w-100">
            <div>
                <label class="form-label"><strong>itemId</strong></label>
                <input class="form-control itemid_edit" id="itemid_edit" name="itemid_edit" readonly="readonly"/>
                <label class="form-label"><strong>productId</strong></label>
                <input class="form-control" id="productid_edit" name="productid_edit"/>
            </div>
            <div>
                <label class="form-label"><strong>listPrice</strong></label>
                <input class="form-control" id="listprice_edit" name="listprice_edit"/>
                <label class="form-label"><strong>unitPrice</strong></label>
                <input class="form-control" id="unitprice_edit" name="unitcost_edit"/>
            </div>
            <div>
                <label class="form-label"><strong>weight</strong></label>
                <input class="form-control" id="attr1_edit" name="attr1_edit"/>

                <label class="form-label"><strong>material</strong></label>
                <input class="form-control" id="attr2_edit" name="attr2_edit"/>
            </div>

            <div>
                <label class="form-label"><strong>description</strong></label>
                <input class="form-control" id="attr3_edit" name="attr3_edit"/>

                <label class="form-label"><strong>peopleSuited</strong></label>
                <input class="form-control" id="attr4_edit" name="attr4_edit"/>
            </div>

            <div>
                <label class="form-label"><strong>tablewareNums</strong></label>
                <input class="form-control" id="attr5_edit" name="attr5_edit"/>
            </div>
        </div>
        <span class="my-css-card">
        <div class="app-card-footer p-4 mt-auto">
            <button type="submit" class="btn app-btn-primary" onclick="hidePopup()">保存所有修改</button>
            <button class="btn app-btn-secondary" type="button" onclick="hidePopup()">取消</button>
        </div>
        </span>
    </div>
</form>

<!--新增弹窗-->
<div class="overlay" id="addNewOverlay" style="display: none;"></div>
<form method="post" action="/Items/singleItem">
    <div class="addNewPopup gy-4 app-card" id="addNewPopup" style="display: none;">
        <div class="app-card-footer p-2-2 mt-auto">
            <a class="my-css-a">商品新增</a>
        </div>
        <div>
            <div>
                <label class="form-label"><strong>itemId</strong></label>
                <input class="form-control" id="itemid" name="itemid"/>
                <label class="form-label"><strong>productId</strong></label>
                <input class="form-control" id="productid" name="productid"/>
            </div>

            <div>
                <label class="form-label"><strong>listPrice</strong></label>
                <input class="form-control" id="listprice" name="listprice"/>
                <label class="form-label"><strong>unitPrice</strong></label>
                <input class="form-control" id="unitprice" name="unitcost"/>
            </div>

            <div>
                <label class="form-label"><strong>weight</strong></label>
                <input class="form-control" id="attr1" name="attr1"/>

                <label class="form-label"><strong>material</strong></label>
                <input class="form-control" id="attr2" name="attr2"/>
            </div>

            <div>
                <label class="form-label"><strong>description</strong></label>
                <input class="form-control" id="attr3" name="attr3"/>

                <label class="form-label"><strong>peopleSuited</strong></label>
                <input class="form-control" id="attr4" name="attr4"/>
            </div>

            <div>
                <label class="form-label"><strong>tablewareNums</strong></label>
                <input class="form-control" id="attr5" name="attr5"/>

                <label class="form-label"><strong>quantity</strong></label>
                <input class="form-control" id="qty" name="qty"/>
            </div>
        </div>

        <span class="my-css-card">
        <div class="app-card-footer p-4 mt-auto">
            <button type="submit" class="btn app-btn-primary" onclick="addNewHidePopup()">保存所有信息</button>
            <button class="btn app-btn-secondary" type="button" onclick="addNewHidePopup()">取消</button>
        </div>
        </span>
    </div>
</form>

<script src="/myplugs/js/floating_window.js"></script>
<script src="/myplugs/js/add_new_float_window.js"></script>
<script src="/myplugs/js/item_floating_window.js"></script>
<script src="/myplugs/js/qty_plus_minus.js"></script>
</body>
</html>